<template>
<div class="container" style="display: flex;flex-direction: column;font-size: 0.9rem;">
	<section style="margin:1rem 0 1rem 0;justify-content: center;align-items: center;width: 100%;display: flex;flex-direction: column;">
		<span v-show="showBtn" style="font-size: 1.1rem;margin-top: 1.5rem;">倒计时{{countDown}}</span>
		<span class="btn" v-show="!showBtn">本次得分:{{totalScore}}分</span>
		<!--<span @click="addTitIndex()" v-show="showBtn" class="btn" >下一题</span>-->
	</section>
	<div v-show="showQuestion==index" v-for="(item,index) in questionData" style="position: relative;width: 100%;margin-top: 0.6rem;">
		<section style="position: absolute;width: 100%;height: 2rem;top: -1.5rem;left: 0;display: flex;justify-content: center;align-items: center;font-size: 0.9rem;">
			<span >{{item.questionSubject}}</span>
		</section>
		<section style="line-height: 2.6rem;position: relative;top: 0;left: 0;">
			{{index+1}}.{{item.questionName}}
		</section>
		<section style="display: flex;flex-direction: column;margin-left: 1.2rem;">
			<span @click="clickDown(item.questionAnswer,'a')" :class="getBgColor(item.questionAnswer,'a')">A.{{item.choiceA}}</span>
			<span @click="clickDown(item.questionAnswer,'b')" :class="getBgColor(item.questionAnswer,'b')">B.{{item.choiceB}}</span>
			<span @click="clickDown(item.questionAnswer,'c')" :class="getBgColor(item.questionAnswer,'c')">C.{{item.choiceC}}</span>
			<span @click="clickDown(item.questionAnswer,'d')" :class="getBgColor(item.questionAnswer,'d')">D.{{item.choiceD}}</span>
		</section>
	</div>
	
		
    <!--<mu-raised-button v-for="(item,index) in questionData" :backgroundColor="clicked==index?'red':''" :label="item" @click="clickme(index)" fullWidth/>-->
</div>
</template>
<script>
	export default {
 	data () {
      return {
        questionData:[],
        clickData:[],
        clicked:null,
        showQuestion:0,
        isCorrect:false,
        correctArry:[],
        choiceOption:'',
        totalScore:0,
        showBtn:true,
        countDown:5
      }
    },
    mounted(){
      this.question()
      let that=this
      this.$nextTick(function(){
      	that.autoNext()
      })
    },
    watch:{
    	showQuestion(){
    		this.choiceOption=''
    		this.countDown=5
    		if(this.showQuestion<this.questionData.length){
    			this.autoNext()
    			this.showBtn=true
    		}else if(this.showQuestion==this.questionData.length){
    			this.showBtn=false
    			this.recordScore()
    		}
    	}
    },
    methods: {
    	autoNext(){
    		let that=this
    		var timer=setInterval(function(){
    			var n=that.countDown-1
    			that.countDown=n
    			if(that.countDown==0){
    				clearInterval(timer)
    				setTimeout(function(){
    					var l=that.showQuestion
    					that.showQuestion=l+1
    				},1500)
    			}
    		},1000)
    	},
    	clickme(val){
    		this.clicked=val
    		this.gotoAddress(subjectData[val],'/answer')
    	},
    	addTitIndex(){
    		var n =this.showQuestion
    		console.info(n)
    		this.showQuestion=n+1
    		if(this.showQuestion==this.questionData.length){
    			this.showBtn=false
    			this.recordScore()
    		}else if(this.showQuestion<this.questionData.length){
    			this.showBtn=true
    		}
    	},
    	getBgColor(val,data){
    		var bgColor=''
//  		if(val=='a'){
//  			val='choiceA'
//  		}else if(val=='b'){
//  			val='choiceB'
//  		}else if(val=='c'){
//  			val='choiceC'
//  		}else if(val=='d'){
//  			val='choiceD'
//  		}
//  		if(val==data){
//  			bgColor='bgRight'
//  		}
    		if(this.choiceOption==data){
    			if(this.correctArry[this.showQuestion]){
    				bgColor='bgGreen'
    				
    			}else{
    				bgColor='bgRed'
    			}
    		}else if(this.choiceOption.length==0){
    			bgColor=''
    		}else{
    			if(val==data){
	    			bgColor='bgRight'
	    		}else{
	    			bgColor=''
	    		}
    		}
    		return bgColor
    	},
    	clickDown(val,choiceVal){
//  		if(val=='a'){
//  			val='choiceA'
//  		}else if(val=='b'){
//  			val='choiceB'
//  		}else if(val=='c'){
//  			val='choiceC'
//  		}else if(val=='d'){
//  			val='choiceD'
//  		}
			console.info(this.clickData)
			if(this.clickData[this.showQuestion]=='0'){
				this.choiceOption=choiceVal
				this.clickData[this.showQuestion]='1'
	    		if(val==choiceVal){
	    			var n =this.totalScore
	    			this.totalScore=n+1
	    			this.correctArry[this.showQuestion]=true
	    		}else{
	    			this.correctArry[this.showQuestion]=false
	    		}
			}else if(this.clickData[this.showQuestion]=='1'){
				return false
			}
			
    		
    	},
    	gotoAddress(value,path){
    		this.$router.push({
      			path:path,
      			query:value
      		})
    	},
    	
    	question(){
    		var a=this.$route.query.subject
        	let that = this
            that.axios.get('/iyx/QuestionBank/QuestionInfo/'+a).then(function (response) {
		    	that.questionData=response.data
		    	for(var i in that.questionData){
		    		that.correctArry.push(false)
		    		that.clickData.push('0')
		    	}
		        console.info(response.data)
		        console.info(that.subjectData)})
		        },
    	recordScore(){
    		let that = this
            that.axios.post('/iyx/QuestionBank/UpdateScore',{
            	'scoreStudentId':localStorage.userNumber,
            	'scoreSubjectId':"1",
            	'scoreAmount':that.totalScore,
            	'scoreSubjectName':that.$route.query.subject
            }).then(function (response) {
		    	that.questionData=response.data
		    	for(var i in that.questionData){
		    		that.correctArry.push(false)
		    	}
		        console.info(response.data)
		        console.info(that.subjectData)})
		        }
    	}
    
}
</script>	
<style>
  .container{
    display: flex;
    flex-wrap: wrap;
  }
  .demo-raised-button {
    margin: 12px;
  }
  .bgGreen,.bgRight{
  	background-color:greenyellow ;
  }
  .bgRed{
  	background-color:red ;
  }
  .btn{
  	display: block;
  	padding: 0.4rem 1rem;
  	border-radius: 3px;
  	background-color: skyblue;
  	color: white;
  }
</style>